<template>
  <div class="search-list">
    <van-nav-bar left-arrow @click-left="goBack" fixed>
      <template #title>
        <input type="text">
      </template>
      <template #right>
        <van-icon name="search" size="20" />
      </template>
    </van-nav-bar>
    <Header :queryKey="queryKey" class="header-title" />
    <div class="header">
      <div class="search-main">
        <ul class="main-if">
          <li
            v-for="(item, index) in searchList.data"
            :key="index"
            @click.stop="changeTab(index)"
          >
            <div :class="searchList.currentIndex === index ? 'active' : ''">
              {{ item.name }}
            </div>
            <div v-if="index !== 0">
              <i
                class="iconfont icon-shangjiantou"
                :class="item.status == 1 ? 'active' : ''"
              ></i>
              <i
                class="iconfont icon-xiajiantou"
                :class="item.status == 2 ? 'active' : ''"
              ></i>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="main-content">
      <div class="" v-if="goodsList.length">
        <ul>
          <li
            v-for="item in goodsList"
            :key="item.id"
            @click="goDetail(item.id)"
          >
            <h3>
              <img :src="item.imgUrl" alt="" />
            </h3>
            <div>
              <p class="title">{{ item.name }}</p>
              <p>{{ item.content }}</p>
              <p class="price">￥{{ item.price }}起</p>
              <p class="other">
                <span>销量: {{ item.num }} </span>
                <span>{{ item.eval }}条评价 </span>
                <span>{{ item.sat }}满意 </span>
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div v-else>--没有数据---</div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/search/Header'
import http from '@/serveies/api/request'
export default {
  name: 'SearchList',
  data () {
    return {
      queryKey: '',
      goodsList: [],
      searchList: {
        currentIndex: 0,
        data: [
          { name: '综合' },
          { name: '销量', status: 0, key: 'num' },
          { name: '价格', status: 0, key: 'price' }
        ]
      }
    }
  },
  components: {
    Header
  },
  created () {
    // 接收搜索页面传递过来的值
    this.queryKey = this.$route.query.key || ''
    // 数据请求
    this.getData()
  },
  computed: {
    orderBy () {
      const obj = this.searchList.data[this.searchList.currentIndex]
      const val = obj.status === 1 ? 'desc' : 'asc'
      return {
        [obj.key]: val
      }
    }
  },
  methods: {
    getData () {
      console.log(this.orderBy)
      http
        .$axios({
          url: '/api/goods/shoplist',
          params: {
            searchName: this.queryKey,
            ...this.orderBy
          }
        })
        .then((res) => {
          this.goodsList = res
        })
    },
    goBack () {
      this.$router.back()
    },
    changeTab (index) {
      this.searchList.currentIndex = index
      // 知道点击的类型
      const item = this.searchList.data[index]
      if (item === 'undefined') {
        return false
      }
      this.searchList.data.forEach((v, i) => {
        if (i !== index) {
          v.status = 0
        }
      })
      if (index === this.searchList.currentIndex) {
        item.status = item.status === 1 ? 2 : 1
      }
      // 进行数据排序
      // 上 升 下 降
      this.getData()
    },
    goDetail (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id: id
        }
      })
    }
  },
  watch: {
    $route () {
      this.queryKey = this.$route.query.key
      if (this.queryKey) {
        this.getData()
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar{
  background-color: #eee;
  .van-nav-bar__title  {
    input {
      border: 1px solid #eee;
      padding: 3px 10px;
      box-sizing: border-box;
    }
  }
  ::v-deep .van-icon {
    color: #333;
    font-size: 20px;
  }
}
.header {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  .header-title {
    margin-bottom: 10px;
  }
  .search-main {
    .main-if {
      .active {
        color: #ff6700;
      }
      display: flex;
      justify-content: space-around;
      height: 1.066667rem;
      background-color: #eee;
      font-size: 0.426667rem;
      padding-top: 0.266667rem;
      box-sizing: border-box;
      color: #777;
      li {
        display: flex;
        div {
          display: flex;
          flex-direction: column;
          padding-left: 0.08rem;
          i {
            font-size: 0.32rem;
          }
        }
      }
    }
  }
}
.main-content {
  padding-top: 36px;
  ul {
    li {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      h3 {
        img {
          width: 3.52rem;
          height: 3.52rem;
        }
      }
      div {
        width: 5.706667rem;
        color: rgba(0, 0, 0, 0.54);
        p {
          color: rgba(0, 0, 0, 0.54);
          margin-top: 0.05rem;
          margin-bottom: 0.133333rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-height: 0.533333rem;
          font-size: 0.32rem;
        }
        .price {
          color: #ff6700;
          font-size: 0.426667rem;
        }
        .title {
          color: rgba(0, 0, 0, 0.87);
          font-size: 0.426667rem;
          margin-top: 0.266667rem;
        }
        .other {
          font-size: 0.32rem;
          span {
            margin-right: 0.266667rem;
          }
        }
      }
    }
  }
}
</style>
